import { useEffect, useRef } from "react";
import styles from "./index.module.scss";
import * as echarts from "echarts";
import {
  BorderBox13,
  BorderBox7,
  BorderBox12,
} from "@jiaminghi/data-view-react";

export default function Monitoring() {
  const chartRef1 = useRef(null);
  const chartRef2 = useRef(null);
  const chartRef3 = useRef(null);
  const tasks = [
    {
      taskName: "编目任务",
      taskNum: "9",
      completed: "7",
      inProgress: "2",
    },
    {
      taskName: "校验任务",
      taskNum: "345",
      completed: "245",
      inProgress: "100",
    },
    {
      taskName: "清洗任务",
      taskNum: "300",
      completed: "100",
      inProgress: "100",
    },
  ];
  const satelliteDatas = [
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
    {
      satelliteName: "GF1_PMS",
      satelliteNum: "123445",
    },
  ];

  useEffect(() => {
    // 检查ref是否存在，然后初始化图表
    const initChart = (chartRef: any, option: any) => {
      if (chartRef.current) {
        const myChart = echarts.init(chartRef.current);
        myChart.setOption(option);
        return () => {
          myChart.dispose();
        };
      }
    };
    // 配置图表1
    const option1 = {
      title: {
        text: "编目数据统计",
        textStyle: {
          color: "white",
        },
        left: "60px",
        top: "15px",
      },
      xAxis: {
        data: [
          "2023-06",
          "2023-07",
          "2023-08",
          "2023-09",
          "2023-10",
          "2023-11",
          "2023-12",
          "2024-01",
          "2024-02",
          "2024-03",
          "2024-04",
          "2024-05",
        ],
      },
      yAxis: {
        // name: "编目数据统计",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 140, 200, 150, 70, 60, 110],
          type: "bar",
        },
      ],
    };
    // 配置图表2
    const option2 = {
      title: {
        text: "用户访问趋势",
        textStyle: {
          color: "white",
        },
        left: "60px",
        top: "15px",
      },
      xAxis: {
        data: [
          "2023-06",
          "2023-07",
          "2023-08",
          "2023-09",
          "2023-10",
          "2023-11",
          "2023-12",
          "2024-01",
          "2024-02",
          "2024-03",
          "2024-04",
          "2024-05",
        ],
      },
      yAxis: {
        // name: "用户访问趋势",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 140, 200, 150, 70, 60, 110],
          type: "bar",
        },
      ],
    };
    // 配置图表3
    const option3 = {
      title: {
        text: "编目成功/失败条数",
        textStyle: {
          color: "white",
        },
        left: "20px",
        top: "20px",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: "5%",
        left: "center",
        textStyle: {
          color: "white",
        },
      },
      series: [
        {
          name: "编目条数",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 484, name: "失败" },
            { value: 300, name: "成功" },
          ],
        },
      ],
    };
    // 分别初始化图表1和图表3
    const cleanupChart1: any = initChart(chartRef1, option1);
    const cleanupChart2: any = initChart(chartRef2, option2);
    const cleanupChart3: any = initChart(chartRef3, option3);
    // 返回清理函数，用于组件卸载时销毁图表
    return () => {
      cleanupChart1();
      cleanupChart2();
      cleanupChart3();
    };
  }, [chartRef1, chartRef2, chartRef3]); // 将refs作为依赖，确保在refs变化时重新初始化图表

  return (
    <div
      style={{
        backgroundColor: "#02051b",
        minHeight: "100vh",
        color: "white",
      }}
    >
      <div className={styles.monitorBox}>
        <div className={styles.topTask}>
          {tasks.map((item: any, index: any) => {
            return (
              <BorderBox13 className={styles.taskItem}>
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                  key={index}
                >
                  <div style={{ display: "flex" }}>
                    <div className={styles.leftIcon}></div>
                    <div>
                      <div>{item.taskName}</div>
                      <div className={styles.taskData}>{item.taskNum}</div>
                    </div>
                  </div>
                  <div style={{ display: "flex" }}>
                    <div className={styles.leftIcon}></div>
                    <div>
                      <div>已完成</div>
                      <div className={styles.taskData}>{item.completed}</div>
                    </div>
                  </div>
                  <div style={{ display: "flex" }}>
                    <div className={styles.leftIcon}></div>
                    <div>
                      <div>进行中</div>
                      <div className={styles.taskData}>{item.inProgress}</div>
                    </div>
                  </div>
                </div>
              </BorderBox13>
            );
          })}
          {/* <BorderBox13 className={styles.taskItem}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <div style={{ display: "flex" }}>
                <div className={styles.leftIcon}></div>
                <div>
                  <div>编目任务</div>
                  <div className={styles.taskData}>9</div>
                </div>
              </div>
              <div style={{ display: "flex" }}>
                <div className={styles.leftIcon}></div>
                <div>
                  <div>已完成</div>
                  <div className={styles.taskData}>9</div>
                </div>
              </div>
              <div style={{ display: "flex" }}>
                <div className={styles.leftIcon}></div>
                <div>
                  <div>进行中</div>
                  <div className={styles.taskData}>9</div>
                </div>
              </div>
            </div>
          </BorderBox13>
          <BorderBox13 className={styles.taskItem}></BorderBox13>
          <BorderBox13 className={styles.taskItem}></BorderBox13> */}
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginTop: "10px",
          }}
        >
          <div className={styles.left}>
            <BorderBox7 className={styles.satelliteData}>
              <div className={styles.title}>卫星及数据量</div>
              <div style={{ display: "flex" }}>
                {satelliteDatas.map((item: any, index: any) => {
                  return (
                    <div
                      style={{
                        marginRight: "20px",
                        marginLeft: "50px",
                        marginTop: "5px",
                      }}
                      key={index}
                    >
                      <div style={{ color: "#ffffff9b" }}>
                        {item.satelliteName}(条)
                      </div>
                      <div style={{ margin: "10px 0", fontSize: "20px" }}>
                        {item.satelliteNum}
                      </div>
                    </div>
                  );
                })}
              </div>
            </BorderBox7>
            <BorderBox12 className={styles.chart}>
              <div ref={chartRef1} className={styles.chart}></div>
            </BorderBox12>
            <BorderBox12 className={styles.chart}>
              <div ref={chartRef2} className={styles.chart}></div>
            </BorderBox12>
          </div>
          <div className={styles.right}>
            <BorderBox12 className={styles.chart}>
              <div ref={chartRef3} className={styles.chart}></div>
            </BorderBox12>
            <BorderBox7 className={styles.data}>
              <div style={{ padding: "20px" }}>
                <div style={{ marginBottom: "20px" }}>
                  数据更新子系统硬件信息概览
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    margin: "10px 0",
                  }}
                >
                  <div>CPU</div>
                  <p>占用率：16%</p>
                  <p>温度：88℃</p>
                  <p>频率：3GHz</p>
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: "10px",
                  }}
                >
                  <div>磁盘</div>
                  <p>空闲：300G</p>
                  <p>已用：100G</p>
                  <p>使用率：33%</p>
                </div>
                <div style={{ display: "flex" }}>
                  <div style={{ marginRight: "60px" }}>内存</div>
                  <p>使用率：70%</p>
                </div>
              </div>
            </BorderBox7>
            <BorderBox7 className={styles.data}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "50px 60px",
                }}
              >
                <div>
                  <div>系统访问总量（次）</div>
                  <div style={{ fontSize: "20px", marginTop: "15px" }}>
                    8739294
                  </div>
                </div>
                <div>
                  <div>数据下载次数（次）</div>
                  <div style={{ fontSize: "20px", marginTop: "15px" }}>
                    8739294
                  </div>
                </div>
              </div>
            </BorderBox7>
          </div>
        </div>
      </div>
    </div>
  );
}
